<template>
  <div class="allwin">
    <div class="officialstrategy">
      <div class="officialstrategyType">
        <div
          style="
            margin-left: 20px;
            margin-top: 20px;
            font-weight: bold;
            color: rgb(64, 158, 255);
          "
        >
          主题分类
        </div>
        <div>
          <hr
            style="margin-top: 10px; margin-left: 10px"
            width="80%"
            color="#CECFD0"
            size="1"
          />
        </div>
        <el-tabs
          :tab-position="tabPosition"
          style="height: 250px; margin-top: 10px"
        >
          <el-tab-pane label="名胜古迹" class="officialstrategyType-item">
            <div
              v-for="(item, index) in this.historical"
              :key="index"
              style="color: #656e79; margin-top: 10px"
              class="officialstrategyType-item-type"
            >
              <a @click="scenicDetails(item)" class="changeStyle">{{ item.scenicName }}</a>
            </div>
          </el-tab-pane>
          <el-tab-pane label="自然风景" class="officialstrategyType-item">
            <div
              v-for="(item, index) in this.natural"
              :key="index"
              style="color: #656e79; margin-top: 10px"
              class="officialstrategyType-item-type"
            >
              <a @click="scenicDetails(item)" class="changeStyle">{{ item.scenicName }}</a>
            </div>
          </el-tab-pane>
          <el-tab-pane label="人文地理" class="officialstrategyType-item">
            <div
              v-for="(item, index) in this.cultural"
              :key="index"
              style="color: #656e79; margin-top: 10px"
              class="officialstrategyType-item-type"
            >
              <a @click="scenicDetails(item)" class="changeStyle">{{ item.scenicName }}</a>
            </div>
          </el-tab-pane>
          <el-tab-pane label="山水奇观" class="officialstrategyType-item">
            <div
              v-for="(item, index) in this.landscape"
              :key="index"
              style="color: #656e79; margin-top: 10px"
              class="officialstrategyType-item-type"
            >
              <a @click="scenicDetails(item)" class="changeStyle">{{ item.scenicName }}</a>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="slideshow">
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in this.landscape" :key="item">
            <!-- <h3>{{ item.scenicCoverUrl }}</h3> -->
            <img :src="item.scenicCoverUrl" @click="scenicDetails(item)" alt="" width="100%" height="100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="travelnotes">
      <div
        style="
          margin-top: 20px;
          margin-left: 30px;
          font-weight: bold;
          color: rgb(64, 158, 255);
        "
      >
        最新游记
      </div>
      <div>
        <hr
          style="margin-top: 10px; margin-left: 20px"
          width="96%"
          color="#CECFD0"
          size="1"
        />
      </div>
      <div>
        <div
          v-for="(item, index) in this.travelnotesData"
          :key="index"
          style="color: #656e79; margin-top: 10px; margin-left: 20px"
        >
          <!-- <a href="1" class="changeStyle">{{ item.notesTitle }}</a> -->
          <div class="notesmodule" @click="travelDetails(item)">
            <div>
              <img
                src="http://r7futd8xx.hn-bkt.clouddn.com/hj15jpag1VTlz1VR.jpg"
                width="100%"
                height="100%"
              />
            </div>

            <div class="notesmodule-right">
              <div style="height: 30%; font-weight: 700">
               <i class="el-icon-edit"></i>  {{ item.notesTitle }}
              </div>
              <div style="height: 20%;margin-top:10px;font-family: KaiTi">
                类型: {{ item.passScenicspot }}
              </div>
              <div style="height: 20%;margin-top:10px;font-family: KaiTi">
                发表时间: {{ item.createTime.split("T")[0] }}
              </div>
            </div>
            <div class="notesmodule-right-most">
              <div style="margin-top:80px;font-family: KaiTi"><i class="el-icon-view"></i> {{ item.browseNum }}浏览</div>
            </div>
          </div>
          <div>
            <hr
              style="margin-top: 10px; margin-left: 0px"
              width="96%"
              color="#CECFD0"
              size="1"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { findAllScenicspot } from "@/api/scenic";
import Link from "@/layout/components/Sidebar/Link.vue";

import { findAllTravelnotes } from "@/api/travelnotes";

export default {
  components: { Link },
  data() {
    return {
      tabPosition: "left",
      historical: [],
      natural: [],
      cultural: [],
      landscape: [],
      travelnotesData: [],
    };
  },
  created() {
    this.findAllScenicspot();
    this.findAllTravelnotes();
  },
  methods: {
    findAllTravelnotes() {
      findAllTravelnotes().then((res) => {
        console.log(res.data);
        this.travelnotesData = res.data;
      });
    },
    findAllScenicspot() {
      findAllScenicspot().then((res) => {
        if (res.code == 200) {
          // console.log(res);
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].scenicType == "名胜古迹") {
              this.historical.push(res.data[i]);
            }
            if (res.data[i].scenicType == "自然风景") {
              this.natural.push(res.data[i]);
            }
            if (res.data[i].scenicType == "人文地理") {
              this.cultural.push(res.data[i]);
            }
            if (res.data[i].scenicType == "山水奇观") {
              this.landscape.push(res.data[i]);
            }
          }
        }
      });
    },
    travelDetails(item){
       this.$router.push({
        name: "readTravelNote",
        query: {
          item: item
        },
      });
    },
    scenicDetails(item){
       this.$router.push({
        name: "scenicDetails",
        query: {
          item: item
        },
      });
    }
  },
};
</script>

<style scoped>
.allwin {
  width: 90%;
}
.officialstrategy {
  display: flex;
  width: 90%;
  margin-left: 12%;
  margin-top: 50px;
}
.officialstrategyType {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 40%;
}
.changeStyle:hover {
  color: rgb(255, 157, 0);
  font-weight: 700;
  font-size: 17px;
  text-decoration: underline;
  cursor: pointer;
}
.notesmodule:hover {
  color: rgb(255, 157, 0);
  font-weight: 700;
  font-size: 17px;
  background-color: rgb(248, 248, 248);
  cursor: pointer;
}

.slideshow {
  margin-left: 50px;
  width: 50%;
}
.slideshow:hover{
  cursor: pointer;
}
.officialstrategyType-item {
  display: flex;
  flex-wrap: wrap;
}
.officialstrategyType-item > div {
  margin-right: 10px;
  line-height: 30px;
}

.travelnotes {
  width: 85%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-left: 12%;
  margin-top: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.notesmodule {
  display: flex;
  height: 120px;
}

.officialstrategyType-item-type {
  font-family: "KaiTi";
}
.notesmodule-right {
  margin-top: 10px;
  margin-left: 20px;
  width: 60%;
  display: flex;
  flex-direction: column;
}
.notesmodule-right-most{
  width: 20%;
}
</style>